<template>
	<div class="page flex">
		<div class="background">
			<img src="https://api.sora13.com/download/20240622/avatar66769b4538c52715888.png" />
		</div>
		<div class="userFlex flex">
			<img class="avatar" src="https://api.sora13.com/download/20240622/avatar66769b4538c52715888.png" />
			<div class="info">
				<h3 class="h3 ell">若非无梦💪</h3>
				<div class="dateFlex flex">
					<div class="item flex">
						<span class="text ell">音乐生成</span>
						<span class="num ell">15</span>
					</div>
					<div class="item flex">
						<span class="text ell">入驻(天)</span>
						<span class="num ell">36</span>
					</div>
					<div class="item flex">
						<span class="text ell">会员</span>
						<span class="num ell" v-if="!true">吴</span>
						<img src="/img/bnx.webp" class="bnx" v-else />
					</div>
				</div>
				<div class="other flex">
					<div class="desc Line2">快写点什么，让更多人了解你的音乐天赋吧！</div>
					<div class="tar flex">
						<div class="item">账户ID: 100021</div>
						<div class="item">发表过音乐</div>
					</div>
				</div>
			</div>
			<div class="btnFlex flex">
				<div class="item">分享主页</div>
				<div class="report iconfont icon-jinggao-F"></div>
			</div>
		</div>
		<div class="container">
			<div class="tarFlex flex">
				<div class="item active">作品集</div>
				<div class="item">喜欢<span class="iconfont icon-suo"></span></div>
			</div>
			<noData v-if="!true"></noData>
			<template v-else>
				<div class="musicFlex flex">
					<div class="musicItem flex" v-for="(item, index) in 15">
						<div class="cardImage">
							<div class="one"></div>
							<div class="two"></div>
							<div class="three"></div>
						</div>
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/120083/20240610/7d1a4341b592463f85365c7aecba38a4_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2"></div>
					</div>
				</div>
				<div class="pageView">
					<el-pagination
						:total="50"
						layout="total, prev, pager, next, jumper"
					>
					</el-pagination>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		layout: 'index',
		head() {
			return {
				title: "个人中心 - AI音乐生成 | Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		flex-direction: column;
		position: relative;
		.background{
			width: 500px;
			height: 200px;
			top: 0;
			right: 0;
			z-index: -1;
			position: absolute;
			img{
				width: 100%;
				height: 100%;
				filter: blur(70px);
			}
			&:after{
				position: absolute;
				top: -150px;
				right: -18px;
				height: 300%;
				width: 200%;
				background: rgba(15,17,21,0.65);
				content: "";
			}
		}
		.userFlex{
			padding: 0 0 35px 0;
			border-bottom: 1px solid rgba(255,255,255,0.06);
			position: relative;
			margin-top: -80px;
			padding-top: 80px + 15px;
			flex-direction: row;
			align-items: center;
			z-index: 2;
			.avatar{
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
			.info{
				flex: 1;
				width: 0;
				margin-left: 25px;
				.h3{
					font-size: 18px;
					font-weight: bold;
					line-height: 1.5;
					color: #FFF;
				}
				.dateFlex{
					flex-direction: row;
					align-items: center;
					margin-top: 5px;
					.item{
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-right: 40px;
						position: relative;
						&:nth-last-child(1){
							&:after{
								display: none;
							}
						}
						&:after{
							content: "";
							position: absolute;
							right: -19px;
							height: 15px;
							width: 1px;
							background: rgba(255,255,255,0.1);
						}
						.num{
							font-size: 17px;
							color: rgba(255,255,255,1);
							font-weight: bold;
						}
						.text{
							font-size: 15px;
							color: rgba(255,255,255,0.55);
							margin-right: 8px;
						}
						.bnx{
							height: 15px;
							margin: 3px 0;
						}
					}
				}
				.other{
					flex-direction: row;
					align-items: center;
					margin-top: 8px;
					.desc{
						color: rgba(255,255,255,0.55);
						font-size: 14px;
					}
					.tar{
						margin-left: 12px;
						flex-direction: row;
						flex-wrap: wrap;
						.item{
							padding: 0 10px;
							color: rgba(224, 245, 255, 0.6);
							background: rgba(204, 221, 255, 0.06);
							margin-right: 8px;
							line-height: 1.8;
							border-radius: 3px;
							font-size: 13px;
						}
					}
				}
			}
			.btnFlex{
				flex-direction: row;
				align-items: center;
				.item{
					background: #01dddc;
					line-height: 35px;
					padding: 0 26px;
					border-radius: 100px;
					font-size: 15px;
					font-weight: bold;
					transition: 0.2s all;
					cursor: pointer;
					&:hover{
						opacity: 0.8;
					}
				}
				.report{
					margin-left: 22px;
					font-size: 17px;
					color: rgba(255,255,255,0.65);
					transition: 0.2s all;
					cursor: pointer;
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
		.container{
			margin-top: 30px;
			width: 100%;
			.tarFlex{
				flex-direction: row;
				flex-wrap: wrap;
				.item{
					border-radius: 7px;
					margin-right: 13px;
					margin-bottom: 13px;
					font-size: 14px;
					color: rgba(224,245,255,.6);
					line-height: 33px;
					padding: 0 23px;
					background: rgba(204,221,255,.06);
					// border: 0.5px solid rgba(184,221,255,.12);
					transition: 0.2s all;
					cursor: pointer;
					span{
						vertical-align: middle;
						margin-left: 6px;
					}
					&:hover{
						opacity: 0.8;
					}
					&.active{
						background: rgba(204,221,255,.18);
						color: #ddeaff;
					}
				}
			}
			.musicFlex{
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 5px;
				.musicItem{
					padding: 20px 20px;
					width: calc((100% - 15px * 2) / 3);
					margin-right: 15px;
					margin-bottom: 15px;
					// border: 0.5px solid rgba(171, 215, 255, .15);
					border-radius: 16px;
					position: relative;
					overflow: hidden;
					flex-direction: row;
					align-items: center;
					.cardImage{
						height: 100%;
						left: 0;
						padding: 1px;
						position: absolute;
						top: 0;
						width: 100%;
						.one{
							background: #506797;
							border-radius: 160.267px;
							filter: blur(120px);
							height: 244.407px;
							left: -122.5px;
							opacity: .15;
							position: absolute;
							top: -133.704px;
							width: 480px;
						}
						.two{
							border-radius: 200px;
							filter: blur(150px);
							opacity: .4;
							position: absolute;
							background: rgba(80, 103, 151, .4);
							bottom: -235.648px;
							height: 311.987px;
							right: -152.292px;
							transform: rotate(19.877deg);
							width: 311.987px;
						}
						.three{
							background: #506797;
							bottom: -83px;
							height: 160px;
							right: 277px;
							width: 262px;
							border-radius: 200px;
							filter: blur(150px);
							opacity: .2;
							position: absolute;
						}
					}
					.cover{
						position: relative;
						z-index: 2;
						width: 90px;
						height: 90px;
						border-radius: 7px;
						overflow: hidden;
						cursor: pointer;
						img{
							width: 100%;
							height: 100%;
							border-radius: 7px;
							transition: 0.2s all;
							&:hover{
								transform: scale(1.05);
							}
						}
					}
					.info{
						position: relative;
						z-index: 2;
						flex: 1;
						width: 0;
						margin-left: 15px;
						.h3{
							color: #ebf8ff;
							font-size: 17px;
							font-weight: bold;
							line-height: 20px;
							cursor: pointer;
							transition: 0.2s all;
							&:hover{
								opacity: 0.8;
							}
						}
						.desc{
							color: rgba(224, 245, 255, 0.6);
							font-size: 14px;
							line-height: 20px;
							margin-top: 9px;
							cursor: pointer;
							transition: 0.2s all;
							&:hover{
								opacity: 0.8;
							}
						}
					}
					.btn{
						position: relative;
						z-index: 2;
						color: rgba(235,248,255,0.7);
						margin-left: 15px;
						line-height: 40px;
						width: 40px;
						text-align: center;
						font-size: 18px;
						background: rgba(255,255,255,0.04);
						border-radius: 100px;
						padding-left: 2px;
						cursor: pointer;
						transition: 0.2s all;
						&:hover{
							transform: scale(1.05);
							opacity: 0.8;
						}
					}
					@media screen and (min-width: 1921px) {
						width: calc((100% - 15px * 3) / 4);
						&:nth-child(4n){
							margin-right: 0;
						}
					}
					@media screen and (max-width: 1920px) {
						width: calc((100% - 15px * 2) / 3);
						&:nth-child(3n){
							margin-right: 0;
						}
					}
				}
			}
			.pageView{
				padding-bottom: 15px;
			}
		}
	}
</style>